<template>
  <div>
    <el-button type="primary" size="mini" @click="addRootComponent">
      添加设备模型
    </el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="component_id" label="部件名称" />
      <el-table-column prop="count" label="数量" />
      <el-table-column prop="position" label="安装位置" />
      <el-table-column prop="description" label="描述" />
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="handleAddSub(scope.row)"
          >
            添加子部件
          </el-button>
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">
            修改
          </el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)">
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// import DeviceModelService from "@/api/device-model";

export default {
  name: "MyDialog",
  data() {
    return {
      formData: {},
      // 校验规则
      rules: {},
    };
  },
  methods: {
    // 初始化添加根部件
    handleAddRoot() {
      console.log("initChangeDeviceModel");
      this.viewMode = "add";
      this.dialogTitle = "添加设备模型";
    },
    // 添加子部件
    handleAddSub(row) {
      console.log("handleAddSub", row);
    },
    // 修改部件
    handleEdit(row) {
      console.log("handleEdit", row);
    },
    // 移除部件
    handleDelete(row) {
      console.log("handleDelete", row);
    },
    // 关闭对话框
    closeDialog() {
      this.$emit("close");
    },
  },
};
</script>
